<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <script src="../layui/layui.js"></script>
  <script src="http://cdn1.lncld.net/static/js/3.3.1/av-min.js"></script>
</head>

<body>
  <table class="layui-table" lay-data="{height:315, page:true, id:'test',limits: [10,20,30]}" lay-filter="test">
    <thead>
      <tr>
        <th lay-data="{field:'name', width:200, sort: true}">姓名</th>
        <th lay-data="{field:'sex', width:200}">性别</th>
        <th lay-data="{field:'phone', width:200}">手机号</th>
        <th lay-data="{field:'email', width:200}">邮箱</th>
      </tr>
    </thead>
  </table>

  <script>
    layui.use('table', function () {
      window.table = layui.table;

    });

    window.onload = function () {
      if (navigator.onLine) {
        var APP_ID = 'FL2oXOMLKV7OUsiGBXX24JA9-gzGzoHsz';
        var APP_KEY = '7UVrM1BA1LVIIC7sajArw6RQ';

        AV.init({
          appId: APP_ID,
          appKey: APP_KEY
        });

        var query = new AV.Query('user')
        query.find().then(function (data) {
          return data.map(function (item) {
            return item.toJSON()
          })
        }).then(function (data) {
          table.reload('test', {
            data: data,
            count: 100
          })
        })
      }

    }
  </script>
</body>

</html>